<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-color: Transparent;
    }
  </style>
  <body>
    <div
      style="background-color: bisque; opacity: 0.5; height: 100%; width: 100%"
      id="panel-content-container"
    >
      this is panel1
      <br />
      updatedata:
      <strong id="updatedata"></strong>
      <br />
      eventdata:
      <strong id="eventdata"></strong>
      <br />
      <a href="javascript:void" id="btn-clickevent">交互事件</a>
    </div>
    <div id="panel-script-container">
      <script>
        (function (contaier, context) {
          var panelOptions = {
            //面板名称
            name: "panel1",
            //面板更新事件
            update(data) {
              document.getElementById("updatedata").innerText = JSON.stringify(
                data
              );
              this.trigger("event1", {
                msg: "panel1 updated!",
                time: new Date().getTime(),
              });
            },
            //其它面板的事件订阅
            subscriptions: {
              //订阅面板
              panel2: {
                //订阅面板的事件
                event2(data) {
                  console.log(this);
                  document.getElementById(
                    "eventdata"
                  ).innerText = JSON.stringify(data);
                },
              },
            },
            //本面板事件描述（描述的结构也可以是其它的格式，）
            // eventDescriptions: [
            //   {
            //     //事件名称
            //     name: "event1",
            //     //事件参数
            //     params: [
            //       {
            //         name: "p1",
            //         description: "参数1",
            //       },
            //       {
            //         name: "p2",
            //         description: "参数2",
            //       },
            //       {
            //         name: "p3",
            //         description: "参数3",
            //       },
            //     ],
            //   },
            // ],
          };
          var thisPanel = context.initPanel(panelOptions);

          function triggerEvent() {
            //事件推送
            thisPanel.trigger("event1", {
              msg: "event from panel1",
              time: new Date(),
            });
            //后台推送
            thisPanel.post({ msg: "post by panel1" });
          }
          document
            .getElementById("btn-clickevent")
            .addEventListener("click", triggerEvent);
        })(document.getElementById("panel-content-container"), window.parent);
      </script>
    </div>
  </body>
</html>
